<template>
  <div class="Box">
    <!-- <meta http-equiv="refresh" content="5"> -->
    <!-- 右侧个人信息 -->
    <div class="information-container" v-if="0 == show">
      <div style="margin: 0.625rem; font-size: 1.5625rem">个人信息</div>

      <!-- 信息栏 -->
      <div class="information-bar">
        <div class="left-text">头像</div>
        <div class="right-text">
          <div style="
              width: 2rem;
              height: 2rem;
              border-radius: 50%;
              margin-right: 0.625rem;
            ">
            <userAvatar class="photo" :user="user" />
          </div>
        </div>
      </div>

      <div class="information-bar">
        <div class="left-text">姓名</div>
        <div class="right-text">
          <div>{{ myMessage.name }}</div>
        </div>
      </div>

      <div class="information-bar">
        <div class="left-text">我的账号</div>
        <div class="right-text">
          <div>{{ myMessage.call }}</div>
        </div>
      </div>
      <!-- <div style="height:710px; width:100%"></div>
    <headsculpture v-if="!cur"></headsculpture> -->
    </div>
    <headsculpture v-if="1 == show">
      <button slot="back" style="border: 0; background: #fff; flex-direction: row; display: flex" @click="show = 0">
        <i class="el-icon-arrow-left"></i>
        <div>返回</div>
      </button>
    </headsculpture>
  </div>
</template>

<script>
import userAvatar from "./userAvatar";
import headsculpture from "./headsculpture";
import { getMyManage } from "@/api/myInfo/index";

export default {
  data () {
    return {
      myMessage: [],
      img: "",
      show: 0,
      user: {},
    };
  },
  components: {
    headsculpture,
    userAvatar,
  },
  methods: {
    getData (data) {
      for (const key in data) {
        this.myMessage = {
          id: key,
          name: data[key][0],
          call: data[key][1],
          photo: data[key][2],
        };
      }
    },
    async gets () {
      const res = await getMyManage({});
      this.getData(res.data);
    },
  },
  mounted () {
    this.gets();
  },
};
</script>


<style scoped>
.Box {
  height: 44.375rem;
  width: 100%;
  border: 0.0625rem solid rgba(245, 245, 245, 1);
  margin: 2.5rem 0;
}
/* 右侧个人信息 */
.information-container {
  display: flex;
  width: 100%;
  align-items: center;
  flex-direction: column;
  border: 0.0625rem solid rgba(245, 245, 245, 1);
}

/* 信息栏 */
.information-bar {
  display: flex;
  position: relative;
  flex-direction: row;
  width: 100%;
  height: 3.125rem;
  margin: 0.0625rem 0.125rem;
  border-radius: 0.3125rem;
  align-items: center;
  border-bottom: 0.0625rem solid rgba(245, 245, 245, 1);
}

/* 左侧信息 */
.left-text {
  margin: 0.625rem 1.875rem;
  font-size: 1.25rem;
  color: #101010;
}

/* 右侧信息 */
.right-text {
  right: 0;
  display: flex;
  color: #999999;
  flex-direction: row;
  position: absolute;
  margin: 0.625rem 1.875rem;
  align-items: center;
}
/*头像照片*/
.img7 {
  height: 1.75rem;
  width: 2rem;
  border-radius: 50%;
  margin-top: 0.3125rem;
}
</style>
